<template>
    <el-row v-loading="loading" type="flex" class="intel-sale-ratio">
        <TableSimple height="30vh" :tableData="tableData" class="flex-item table" />
        <ChartSaleRatio class="flex-item chart-item" :data="tableData.data" />
    </el-row>
</template>

<script>
import ChartSaleRatio from './chart-sale-ratio'
import TableSimple from '../user-data/table-simple'
import { subComponentMixin } from '@/mixins/client-analysis/'
export default {
  name: 'IntelSaleRatio',
  mixins: [subComponentMixin],
  components: { ChartSaleRatio, TableSimple },
  data () {
    return {
      loading: true,
      tableData: {
        column: [
          {
            label: '年月',
            prop: 'year_month',
            sortable: true
          },
          {
            label: '月前销量',
            prop: 'previous_sale_quantity',
            sortable: true
          },
          {
            label: '当月销量',
            prop: 'current_sale_quantity',
            sortable: true
          },
          {
            label: '环比',
            prop: 'chain_relative_ratio',
            sortable: true
          }
        ],
        data: []
      }
    }
  },
  created () {
    this.debounceGetData()
  },
  methods: {
    getData () {
      this._getIntelSaleRatioData()
    },
    async _getIntelSaleRatioData () {
      this.loading = true
      const { data: { data: { list = [] }, code } } = await this.$http
        .get(this.getApiUrl('dataanalysis_iot/sale/getDeviceMonthSaleQoQ', false),
          {
            params: this.requestParams
          })
      this.loading = false
      if (code === 0) {
        this.tableData.data = list
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    .intel-sale-ratio {
        .flex-item {
            flex: 1 0;
            &.table {
            flex-basis: 40%;
            }
            &.chart-item {
            flex-basis: 60%;
            }
        }
        .table ::v-deep {
          .el-table__row {
            td {
              padding: 6px
            }
          }
        }
    }
</style>
